import React, { Component } from 'react'
import { connect } from 'react-redux'
import { WhiteSpace, List, WingBlank, SearchBar, Button, Icon, Carousel, TextareaItem,InputItem } from 'antd-mobile'
import TitleNavBar from '@/common/components/displays/TitleNavBar'

import '@/common/style/ui.less'
import '@/common/style/portalagencytalent.less'

const Item = List.Item;
const Brief = Item.Brief;
class AgencyTalent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: ['1', '2', '3'],
            imgHeight: 176,
            titleData: {
                title: "Back",
                centerTitle: "Talent Apply Info"
            },
        }
    }

    render() {
        return (
            <div className="agencyCarouselcontainer">
                <TitleNavBar titleData={this.state.titleData} Drawerstatus={false} />
                <Carousel
                    autoplay={false}
                    infinite
                    className="agency-carouselcontainer"
                    beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                    afterChange={index => console.log('slide to', index)}
                >
                    {this.state.data.map((val, index) => (
                        <a
                            key={index}
                            href="http://www.alipay.com"
                            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                        >
                            <img
                                src={require("../../images/AgencyTalentCarousel.jpg")}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </a>
                    ))}
                </Carousel>
                <WhiteSpace />
                <WhiteSpace />
                <WhiteSpace />
                <List className="my-list">
                    <Item extra={'AgencyName/AgencyId'}>Agency</Item>
                </List>
                <List className="my-list">
                    <Item extra={'TalentName'}>TalentName</Item>
                </List>
                <List className="my-list">
                    <Item extra={'Address'}>Address</Item>
                </List>
                <List className="my-list">
                    <Item extra={'WhatApp'}>WhatApp</Item>
                </List>
                <List className="my-list">
                    <Item extra={'Email'}>Email</Item>
                </List>
                <List className="my-list">
                    <Item extra={'9090'}>ICNC ID</Item>
                </List>
                <List renderHeader={() => 'ICNC ID'} className="my-list">
                    <TextareaItem
                        rows={3}
                        placeholder="fixed number of lines"
                    />
                </List>
                <List className="my-list">
                    <Item extra={'9090'}>Bank Account</Item>
                </List>
                <List renderHeader={() => 'Bank Account Photo'} className="my-list">
                    <img src={require('../../images/AgencyTalentCarousel.jpg')}
                        style={{
                            width: '100%',
                            height: '100%'
                        }}
                    />
                </List>
                <List renderHeader={() => 'Talent Performance Video'} className="my-list">
                    <video width="100%" height="100%" controls poster={require('../../images/AgencyTalentCarousel.jpg')}>
                        <source src="http://www.whservice.cn/group1/M00/00/0C/rBL0uVvqR6uAGe5VABi9USrIWKs082.mp4" type="video/mp4"></source>
                    </video>
                </List>
                <List className="btn-listcontainer">
                    <Button>OK</Button>
                    <InputItem
                        defaultValue="text"
                        placeholder=""
                        data-seed="logId"
                    ></InputItem>
                     <Button>Submit</Button>
                </List>
            </div>
        )
    }
}

function mapStateToProps(state, ownProps) {
    return {

    }
}

export default connect(mapStateToProps)(AgencyTalent);
